<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ page import="entity.Owner" %>
        <%@ page import="entity.FeeType" %>
            <%@ page import="dao.FeeTypeDao" %>
                <%@ page import="java.util.List" %>
                    <html>

                    <head>
                        <title>在线缴费</title>
                        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
                            rel="stylesheet">
                        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
                            rel="stylesheet">
                        <style>
                            body {
                                background-color: #f8f9fa;
                                padding-top: 2rem;
                            }

                            .card {
                                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                                border: none;
                            }

                            .back-link {
                                text-decoration: none;
                                color: #6c757d;
                                display: inline-flex;
                                align-items: center;
                                gap: 0.5rem;
                            }

                            .back-link:hover {
                                color: #495057;
                            }

                            .qrcode {
                                text-align: center;
                                padding: 2rem;
                                border-top: 1px solid #dee2e6;
                                margin-top: 2rem;
                            }

                            .qrcode img {
                                max-width: 200px;
                                margin: 1rem 0;
                            }

                            #amount {
                                background-color: #e9ecef;
                                font-weight: 500;
                                color: #198754;
                            }
                        </style>
                    </head>

                    <body>
                        <% Owner owner=(Owner) session.getAttribute("owner"); if (owner==null) {
                            response.sendRedirect("login.jsp"); return; } FeeTypeDao feeTypeDao=new FeeTypeDao();
                            List<FeeType> feeTypes = feeTypeDao.getAllFeeTypes();
                            %>

                            <div class="container">
                                <div class="row justify-content-center">
                                    <div class="col-md-8">
                                        <a href="index.jsp" class="back-link mb-3 d-inline-block">
                                            <i class="bi bi-arrow-left"></i> 返回首页
                                        </a>

                                        <div class="card">
                                            <div class="card-body">
                                                <h2 class="card-title text-center mb-4">在线缴费</h2>
                                                <form action="payment" method="post" id="paymentForm">
                                                    <div class="mb-3">
                                                        <label class="form-label">费用类型</label>
                                                        <select class="form-select" id="feeType" name="feeTypeId"
                                                            onchange="calculateAmount()" required>
                                                            <option value="">请选择费用类型</option>
                                                            <% for (FeeType feeType : feeTypes) { %>
                                                                <option value="<%= feeType.getId() %>"
                                                                    data-price="<%= feeType.getPrice() %>"
                                                                    data-unit="<%= feeType.getUnit() %>">
                                                                    <%= feeType.getName() %>（<%= feeType.getPrice() %>元/
                                                                            <%= feeType.getUnit() %>）
                                                                </option>
                                                                <% } %>
                                                        </select>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">缴费数量</label>
                                                        <input type="number" class="form-control" id="quantity"
                                                            name="quantity" step="0.01" min="0"
                                                            onchange="calculateAmount()" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label">缴费金额</label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">¥</span>
                                                            <input type="number" class="form-control" id="amount"
                                                                name="amount" readonly>
                                                        </div>
                                                    </div>

                                                    <div class="d-grid">
                                                        <button type="button" class="btn btn-primary"
                                                            onclick="handlePayment()">
                                                            <i class="bi bi-credit-card"></i> 确认缴费
                                                        </button>
                                                    </div>
                                                </form>

                                                <div id="qrcode" class="qrcode" style="display: none;">
                                                    <h3 class="text-center">请扫码支付</h3>
                                                    <img src="images/img.png" alt="支付二维码" class="img-fluid">
                                                    <p class="text-center mb-0">
                                                        <button onclick="confirmPayment()"
                                                            class="btn btn-success mt-3">确认已支付</button>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script
                                src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
                            <script>
                                function calculateAmount() {
                                    var feeType = document.getElementById("feeType");
                                    var quantity = document.getElementById("quantity");
                                    var amount = document.getElementById("amount");
                                    var price = feeType.options[feeType.selectedIndex].getAttribute("data-price");

                                    if (quantity.value && price) {
                                        amount.value = (parseFloat(quantity.value) * parseFloat(price)).toFixed(2);
                                    }
                                }

                                function handlePayment() {
                                    if (document.getElementById("amount").value <= 0) {
                                        alert("请先输入缴费数量！");
                                        return;
                                    }
                                    document.getElementById("qrcode").style.display = "block";
                                }

                                function confirmPayment() {
                                    document.getElementById("paymentForm").submit();
                                }
                            </script>
                    </body>

                    </html>